import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { ProCard, ProDescriptions, ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, message, Space, Image, Popconfirm } from 'antd';
import { useState, useRef } from 'react';
// import { reqActAnswerList, reqDeleteActAnswer } from '@/services/firstConsultation';
import { TableListData, TableListPagination } from './data';
import { EditModal } from './components/EditModal';

export default () => {

  const [type, setType] = useState('table');
  const [open, setOpen] = useState(false);
  const [iscreated, setIscreated] = useState(true);
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const actionRef = useRef<any>();
  const PopconfirmTitle = `确认删除吗？此操作不可撤销 `;
  const [activeKey, setActiveKey] = useState<any>('1');
  const [row, setRow] = useState<any>();
  const handleModal = (show: boolean, row: any = null) => {
    setRow(row);
    setIsOpen(show);
  }
  const handleTableList = async (params: TableListPagination) => {
    // const res = await reqActAnswerList(params);
    // if (res.code === 200) {
    // 	const { list, totalCount } = res?.data;
    // 	return {
    // 		data: list,
    // 		success: true,
    // 		total: totalCount,
    // 	};
    // }
  };
  const handleEdit = (row: any) => {
    setIsOpen(true);
    setRow(row);
    setIscreated(false);
  }
  const handleDelete = async (id: number) => {
    // const res = await reqDeleteActAnswer({ id })
    // if (res?.code === 200) {
    // 	message.success(res?.message)
    // 	actionRef?.current.reload()
    // }
  }
  const handleCreate = () => {
    setIsOpen(true); setRow({}); setIscreated(false);
  }
  const onClose = () => setOpen(false);
  const columns: ProColumns<TableListData>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      ellipsis: true,
      search: false,
    },
    {
      title: '手机号',
      dataIndex: 'phoneNumber',
      ellipsis: true,
      search: false,
    },
    {
      title: '答案数据',
      dataIndex: 'answerData',
      ellipsis: true,
      search: false,
    },
    // {
    // 	title: '',
    // 	dataIndex: 'actId',
    // 	ellipsis: true,
    // 	search: false,
    // },
    {
      title: '操作',
      valueType: 'option',
      dataIndex: 'id',
      width: 180,
      align: 'center',
      render: (text, row) => [
        <Button key='edit' type='link' icon={<FormOutlined />} onClick={() => handleEdit(row)}>编辑</Button>,
        <Popconfirm key='popconfirm' title={PopconfirmTitle} placement='topRight' okText='确定' cancelText='取消' onConfirm={() => handleDelete(row?.id)}><Button key='delete' type='link' icon={<DeleteOutlined />}>删除</Button></Popconfirm>
      ],
    },
  ];
  return (
    <ProCard>
      <ProTable<TableListData>
        columns={columns}
        type={type as 'table'}
        search={false}
        actionRef={actionRef}
        request={(params): Promise<any> => handleTableList(params)}
        pagination={{ pageSize: 10, }}
        rowKey="id"
        dateFormatter="string"
        headerTitle=""
        toolBarRender={() => [
          <Button key="3" type="primary" onClick={handleCreate}><PlusOutlined />
            新建
          </Button>,
        ]}
      />
      {
        isOpen ? <EditModal isOpen={isOpen} handleModal={handleModal} row={row} actionRef={actionRef} activeKey={activeKey} /> : null
      }
    </ProCard>
  );
};

